import { FC, useState, useEffect, useMemo } from 'react';
import { useHistory } from 'react-router';
import styles from './style.less';
import WarningTab from '@/components/WarningTab';
import Map from '@/components/Map';
import TabList from '@/components/TabList';
import SimpleList from '@/components/SimpleList';
import Image from '@/components/Image';
import Line from '@/components/Line';
import ImportantCompany from '@/components/ImportantCompany';
import NumberScroll from '@/components/NumberScroll';

import totalnumIcon from '@/assets/fxyj/totalnum_icon.png';
import companyIcon from '@/assets/fxyj/company_icon.png';

import { tabArr, moreTabArr, yjtab, yjtab_second } from './config';

import { useModel } from 'umi';

const first_list_columns: any[] = [
  {
    title: '类型',
    dataIndex: 'YJQF',
    align: 'center',
    width: 95,
    render: (data: any) => (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'flex-start',
          color: '#FDFF00',
        }}
      >
        {data.YJQF}
      </div>
    ),
  },
  {
    title: '内容',
    dataIndex: 'content',
    width: 575,
    render: (data: any) => (
      <p
        style={{
          whiteSpace: 'normal',
          wordBreak: 'break-word',
          textAlign: 'left',
          marginBottom: 0,
          padding: '5px 0',
        }}
      >
        <span>{data.info}</span>
        {
          <span
            style={{
              color: '#FDFF00',
              marginBottom: 0,
              display: 'block',
            }}
          >
            请予关注
            <span style={{ paddingLeft: 10 }}>[{data.YJSJ || ''}]</span>
          </span>
        }
      </p>
    ),
  },
];

const second_columns: any[] = [
  {
    title: '企业名称',
    dataIndex: 'name',
    width: 315,
    align: 'center',
    render: (data: any) => (
      <p style={{ width: '100%', marginBottom: 0, textAlign: 'left' }}>
        {data.name}
      </p>
    ),
  },
  {
    title: '同比',
    dataIndex: 'tb',
    width: 120,
    align: 'center',
    render: (data: any) => (
      <span style={{ color: '#FDFF00' }}>{data.tb ? data.tb + '%' : '-'}</span>
    ),
  },
  {
    title: '模型预测',
    dataIndex: '',
    render: (data: any) => (
      <p
        style={{
          cursor: 'pointer',
          marginBottom: 0,
        }}
        onClick={() => {
          console.log(data);
        }}
      >
        查看详情
      </p>
    ),
  },
];

const Yqyj: FC = () => {
  const history = useHistory();
  const [selectedName, setSelectedName] = useState<string>('');
  const [typeIndex, setTypeIndex] = useState<number>(0);
  const [rankIndex, setRankIndex] = useState<number>(0);

  const {
    yjList,
    getYjList,
    rankList,
    getRankList,
    marker,
    getMarker,
    removeMarker,
  } = useModel('qyyj');
  // 获取预警数据
  const toGetYjList = () => {
    getYjList({
      enterpriseType: selectedName,
      YJQF: yjtab[typeIndex]?.type,
    });
  };
  // 获取企业预警排行榜
  const toGetRankList = () => {
    const item = yjtab_second[rankIndex];
    if (item) {
      getRankList({
        type: item.type,
      });
    }
  };

  useEffect(() => {
    const item = tabArr[0];
    setSelectedName(item.title);
  }, []);

  useEffect(() => {
    toGetYjList();
    toGetRankList();
    removeMarker();
  }, [typeIndex, selectedName]);

  useEffect(() => {
    toGetRankList();
  }, [rankIndex]);
  const lineData = useMemo(() => {
    const values = yjList?.YJCYData?.values;
    const legends = yjList?.YJCYData?.legends;
    if (values && legends) {
      return values.map((item: any, index: number) => ({
        name: legends[index],
        data: item.data,
      }));
    }
    return [];
  }, [yjList]);

  return (
    <div className={styles.yj_container}>
      <div className={styles.map_container}>
        <Map title="预警企业分布图" marker={marker}></Map>
      </div>
      <div className={styles.middle_container}>
        <div className={styles.first}>
          <WarningTab
            dataSource={tabArr}
            moreData={moreTabArr}
            onTabChange={(v) => {
              setSelectedName(v);
            }}
          ></WarningTab>
          <div className={styles.first_list}>
            <TabList
              size="3x"
              dataSource={yjtab}
              currentIndex={typeIndex}
              onChange={(v, index) => {
                setTypeIndex(index);
              }}
            />
            <div className={styles.first_list_table}>
              <SimpleList
                width={690}
                height={260}
                columns={first_list_columns}
                dataSource={yjList?.warningInfo || []}
                rowStyle={{
                  height: 'auto',
                }}
                hideHead
                hover
                selected={(v: any) => {
                  console.log(v);
                  getMarker({
                    ids: v.ids,
                  });
                }}
              ></SimpleList>
            </div>
          </div>
        </div>
        <div className={styles.second}>
          <div className={styles.title}>
            <span>企业预警指标排行榜</span>
          </div>
          <div
            style={{
              marginTop: 10,
            }}
          >
            <TabList
              size="2x"
              dataSource={yjtab_second}
              currentIndex={rankIndex}
              onChange={(v, index) => {
                setRankIndex(index);
              }}
            />
            <div
              style={{
                width: 690,
                margin: '0 auto',
              }}
            >
              <SimpleList
                width={690}
                height={288}
                columns={second_columns}
                dataSource={rankList}
                rowStyle={{
                  height: 48,
                }}
                sortNumber
                sortStyle={{ width: 95 }}
                sortText="排名"
                hover
                selected={(v: any) => {
                  console.log(v);
                }}
              ></SimpleList>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.right_container}>
        <div className={styles.third}>
          <div className={styles.title}>
            <span>预警情况统计</span>
          </div>
          <div className={styles.totals_warp}>
            <div className={styles.totals_item}>
              <Image src={totalnumIcon} />
              <div className={styles.titals_info}>
                <div className={styles.item_value}>
                  <NumberScroll
                    value={yjList?.YJCYData?.enterprisesWarningNum || 0}
                    style={{
                      fontSize: 44,
                    }}
                  />
                  <span className={styles.unit}>次</span>
                </div>
                <div className={styles.item_title}>预警总数</div>
              </div>
            </div>
            <div className={styles.totals_item}>
              <Image src={companyIcon} />
              <div className={styles.titals_info}>
                <div className={styles.item_value}>
                  <NumberScroll
                    value={yjList?.YJCYData?.enterprisesNum || 0}
                    style={{
                      fontSize: 44,
                    }}
                  />
                  <span className={styles.unit}>家</span>
                </div>
                <div className={styles.item_title}>预警企业</div>
              </div>
            </div>
          </div>
          <div
            style={{
              marginTop: 35,
            }}
          >
            <Line
              title=" "
              width={520}
              height={240}
              category={yjList?.YJCYData?.names || []}
              dataSource={lineData}
              colors={['#CD6CFF']}
              legend={{
                show: true,
                icon: '',
                right: '2%',
                textStyle: {
                  color: '#A3D5FF',
                },
              }}
              unit="预警条数"
            />
          </div>
        </div>
        <div className={styles.fourth}>
          <div className={styles.title}>
            <span>
              重点关注企业({yjList?.stressEnterpriseData?.data.length || 0})
            </span>
          </div>
          <div
            style={{
              marginTop: 10,
            }}
          >
            <ImportantCompany
              dataSource={yjList?.stressEnterpriseData?.data || []}
              onCompanyClick={(v: any) => {
                window.sessionStorage.setItem('companyName', v['B102']);
                window.sessionStorage.setItem('companyId', v.id);
                window.sessionStorage.setItem('backUrl', window.location.href);
                history.push('/qyhx/index1');
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Yqyj;
